<template>
  <div class="content">
    <br>
    <br>
    <el-row>
      <el-col :span="4">邀请下级：</el-col>
      <el-col :span="8">
        <el-radio-group v-model="updataQuery.ifInvitation">
          <el-radio :label="1">允许</el-radio>
          <el-radio :label="0" style="margin-left: 90px">不允许</el-radio>
        </el-radio-group>
        <div class="text">
          被邀请人通过邀请海报进入同意之后，会和邀请人绑定上下级关系
        </div>
      </el-col>
    </el-row>
    <br>
    <br>
    <br>
    <el-row>
      <el-col :span="4">关系绑定有效期：</el-col>
      <el-col :span="8">
        <el-radio-group v-model="updataQuery.bindValidity" @change="change">
          <el-radio :label="1">永久有效</el-radio>
          <el-radio :label="2" style="margin-left: 60px">
            <el-input
              v-model="updataQuery.validityDay"
              maxlength="9"
              :disabled="disabled"
              class="input"
            />&nbsp;天有效
          </el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <br>
    <br>
    <br>
    <el-row>
      <el-col :span="4">是否允许抢客：</el-col>
      <el-col :span="20">
        <el-radio-group v-model="updataQuery.ifRobbing" @change="change1">
          <el-radio :label="1">随时可抢客</el-radio>
          <el-radio :label="2" style="margin-left: 60px">不允许抢客</el-radio>
          <el-radio :label="3" style="margin-left: 60px">
            保护期&nbsp;&nbsp;
            <el-input
              v-model="updataQuery.robbingDay"
              maxlength="9"
              :disabled="disabled1"
              class="input"
            />&nbsp;天不允许抢
          </el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <br>
    <br>
    <br>
    <el-row class="mbt">
      <el-col :span="4">分销员之间建立客户关系：</el-col>
      <el-col :span="8">
        <el-radio-group v-model="updataQuery.ifDistributionRelationship">
          <el-radio :label="1">允许</el-radio>
          <el-radio :label="0" style="margin-left: 90px">不允许</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-button type="primary" class="cancel" @click="cancel">取消</el-button>
    <el-button type="primary" :loading="saveLoading" class="subm" @click="subm">保存</el-button>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { shipGetById, shipSave, shipUpdate } from '@/api/distributor'

const disabled = ref(false)
const disabled1 = ref(false)
const saveLoading = ref(false)
const first = ref(false)
const updataQuery = ref({
  validityDay: '',
  ifInvitation: '',
  bindValidity: '',
  robbingDay: '',
  ifRobbing: '',
  ifDistributionRelationship: ''
})

onBeforeMount(() => {
  salesRelationConfig()
})
// 关系设置
const salesRelationConfig = async () => {
  const res = await shipGetById({})
  if (JSON.stringify(res.data) === '{}') {
    first.value = true
  } else {
    first.value = false
    updataQuery.value = res.data
  }
  // console.log('关系设置', this.relationItem)
}
const cancel = () => {
  salesRelationConfig()
  ElMessage({
    message: '已取消',
    type: 'success',
  })
}
const subm = async () => {
  if (first.value) {
    try {
      saveLoading.value = true
      const res = await shipSave(updataQuery.value)
      if (res.code === '') {
        ElMessage.success('新增成功')
        salesRelationConfig()
      }
    } finally {
      saveLoading.value = false
    }
  } else {
    try {
      saveLoading.value = true
      const res = await shipUpdate(updataQuery.value)
      if (res.code === '') {
        ElMessage.success('修改成功')
        salesRelationConfig()
      }
    } finally {
      saveLoading.value = false
    }
  }
  //   const res = await Distribution.updataConfig(this.updataQuery);
  //   console.log(res);
  //   const { code } = res.data;
  //   if (code == 0) {
  //     this.$message({
  //       message: "保存成功",
  //       type: "success"
  //     });
  //   }
}
const change = (e) => {
  if (e === 1) {
    disabled.value = true
  } else {
    disabled.value = false
  }
}
const change1 = (e) => {
  if (e === 1 || e === 2) {
    disabled1.value = true
  } else {
    disabled1.value = false
  }
}
</script>

<style lang="scss" scoped>
el-radio {
  zoom: 150%;
}
.content {
  font-size: 16px;
  width: 1400px;
  margin-top: 100px;
  margin: auto;
  .text {
    line-height: 60px;
    font-size: 15px;
    color: grey;
  }
  .input {
    width: 100px;
    background: #ffffff;
    border-radius: 4px;
  }
  .cancel {
    width: 100px;
    height: 38px;
    background: #ffffff;
    border: 1px solid #e0e5eb;
    color: #333333;
    border-radius: 4px;
  }
  .subm {
    width: 100px;
    height: 38px;
    border-radius: 4px;
  }
}
:deep(.el-radio__inner) {
  width: 30px;
  height: 30px;
}
:deep(.el-radio__label) {
  font-size: 14px;
}
.mbt {
  margin-bottom: 50px;
}
</style>
